<template>
	<view class="home-container">
		<!-- 搜索区域 -->
		<searchBar></searchBar>
		<!-- 轮播图区域 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in swipers" :key="index">
				<view class="swiper-item">
					<image class="swiper-img" :src="item.image_src"></image>
				</view>
			</swiper-item> 
		</swiper>
		
		<!-- 导航区域 -->
		<view class="nav-box">
			<view class="item" v-for="(item, index) in navs" :key="index">
				<image :src="item.image_src" ></image>
			</view>
		</view>
		
		<!-- 楼层区域 -->
		<div class="floor-box">  
			<view class="floor-item" v-for="(item, index) in floorList" :key="index">
				<view class="title">
					<image :src="item.floor_title.image_src"></image>
				</view>
				
				<!-- 底部图片 -->
				<view class="product">
					<view class="left">
						<image :src="item.product_list[0].image_src"></image>
					</view>
					<view class="right">
						<image v-for="(item, index) in item.product_list" :key = "index" :src="item.image_src" v-if = "index!=0"></image>
					</view>
				</view>
			</view>
		</div>
		
		<!-- 返回顶部 -->
		<view class="upTo" v-if="isShow" @tap="toUp">
			<image src="../../static/images/up.png" ></image>
			<span>顶部</span>
		</view>
	</view>   
</template>

<script>
	// 导入组件
	import searchBar from '../../components/searchBar.vue'
	
	export default {
		data() {
			return {
				// 轮播图的数据
				swipers:[],
				// 导航区
				navs:[],
				// 楼层导航区
				floorList:[],
				// 控制按钮隐藏
				isShow:false
			}
		},
		// 定义组件
		components:{
			searchBar
		},
		// 页面滚动
		onPageScroll({
			scrollTop
		}) {
			if(scrollTop>=200){
				this.isShow = true
			}else{
				this.isShow = false
			}
		},
		onLoad() {
			this.getSwipers(),
			this.getNav(),
			this.getFloor()
		},
		
		methods: {
			// 返回顶部
			toUp(){
				uni.pageScrollTo({
					scrollTop:0
				})
			},
			// 楼层导航区域
			async getFloor(){
				const res = await this.$request({
					url:'home/floordata',
					method:'get'
				})
				console.log(res)
				this.floorList = res.data.message  
				
			},
			// 导航区数据
			async getNav(){
				const res = await this.$request({
					url:'home/catitems',
					method:'get'
				})
				this.navs = res.data.message
			},
			
			// 轮播图
			async getSwipers(){
				// const res = await uni.request({
				// 	url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'
				// })
				// console.log(res)
				// this.swipers = res[1].data.message
				
				const res2 = await this.$request({
					url:'home/swiperdata',
					method:'get'
				})
				this.swipers = res2.data.message
			} 
		}
	}
</script>

<style lang="less">
	.home-container{
		.swiper-img {
			display: block;
			width: 100%;
			height: 340rpx;
		}
		.nav-box{
			display: flex;
			height: 194rpx;
			.item{
				flex: 1;
				image{
					display: block;
					margin: 10rpx auto 0;
					width: 128rpx;
					height: 140rpx;
				}
			}
		}
		.floor-box{
			.title{
				height: 88rpx;
				background-color: #f4f4f4;
				padding-top: 10px;
				box-sizing: border-box;
				image{
					height: 59rpx;
					display: block;
					width: 100%;
				}
			}
		}
		.product {
			display: flex;
			padding-top: 10rpx;
			padding-left: 17rpx;
			.left {
				margin-right: 10rpx;
				image {
					width: 232rpx;
					height: 386rpx;
				}
			}
			.right{
				display: flex;
				flex-wrap: wrap;
				image {
					width: 232rpx;
					height: 188rpx;
					margin-right: 10rpx;
				}
			}
		}
		.upTo {
			position: fixed;
			width: 100rpx;
			height: 100rpx;
			background-color: #FFFFFF;
			opacity: .8;
			border-radius: 50%;
			right: 50rpx;
			bottom: 100rpx;
			text-align: center;
			box-sizing: border-box;
			image {
				display: block;
				width: 40rpx;
				height: 40rpx;
				padding-left:15px;
				padding-top:5px
			}
			span {
				font-size: 12px;
				text-align: center;
			}
		}
	}
</style>
